<template>
    <div class="context">
        <div class="title">
            <span class="title-text">数据统计</span>
            <span class="title-btn">最近12月</span>
        </div>
        <div class="top">
            <FaultTotal :faultList="faultList"></FaultTotal>
        </div>
        <div class="middle">
            <div class="chart-container" id="line_chart">

            </div>
        </div>
        <div class="footer">
            <div class="chart-container" id="bar_chart">

            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';

import FaultTotal from '../components/FaultTotal';
import FaultLine from '../assets/js/FaultLine';
import FaultBar from '../assets/js/FaultBar';

let lineChart, barChart;

export default {
    name: 'RightView',
    components: { FaultTotal },
    mounted() {
        this.$nextTick(function() {
            // 日告警 折线图
            lineChart = new FaultLine({
                el: document.getElementById('line_chart')
            });
            lineChart.setData({
                title: '告警平均日趋势',
                titleFontSize: 0.3,
                titleFontColor: '#00A9F6',
                tipTextSize: 0.25,
                fontSize: 0.2,
                list: this.alarmDayList
            });

            //月告警 柱状图
            barChart = new FaultBar({
                el: document.getElementById('bar_chart')
            });
            barChart.setData({
                title: '告警月趋势',
                titleFontSize: 0.3,
                titleFontColor: '#00A9F6',
                tipTextSize: 0.25,
                fontSize: 0.2,
                list: this.alarmMonthList
            });
        });
    },
    computed: {
        ...mapGetters({
            faultList: 'faultList',
            alarmDayList: 'alarmDayList',
            alarmMonthList: 'alarmMonthList'
        })
    }
};
</script>
<style scoped>
.context {
    width: 100%;
    height: 100%;
    border-left: 0.01rem solid #ffffff;
}
.title {
    width: 100%;
    height: 10%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.01rem solid #00a9f6;
}
.title .title-text {
    margin-left: 0.3rem;
}
.title .title-btn {
    margin-right: 0.4rem;
    background-color: #00a9f6;
    color: #000000;
    padding: 0.09rem 0.36rem;
}
.top {
    width: 100%;
    height: 30%;
}
.middle {
    width: 100%;
    height: 30%;
}
.footer {
    width: 100%;
    height: 30%;
}
.chart-container {
    width: 95%;
    height: 95%;
    border: 0.01rem solid #00a9f6;
    margin: 0 auto;
}
</style>
